import React, {useEffect, useState} from "react";
import {List, Avatar, Button, Skeleton, message} from 'antd';
import './NotifyContentPopover.scss'

type DataProps = {
    loading: boolean
    name: string
    picture: string
}

type Props = {
    initLoading: boolean
    loading: boolean
    // data?: object
    // list?: object
    data: DataProps[]
    list: DataProps[]
}


const initialState: Props = {
    initLoading: false,
    loading: false,
    data: [],
    list: [],
};


const NotifyContentPopover = () => {

    const [state, setState] = useState(initialState);
    const [readLoading, setReadLoading] = useState(true);

    // loadMore = () => {
    //
    // };
    const dataList: DataProps[] = [];
    useEffect(() => {

        // debugger;
        console.log(readLoading);
        // debugger;


        for (let i = 0; i < 5; i++) {
            const map: DataProps = {
                loading: false,
                name: "测试数据信息" + i,
                picture: "asssssssss" + i
            };


            dataList.push(map);
        }


        setState(
            {
                initLoading: false,
                loading: false,
                data: dataList,
                list: dataList,
            }
        );


    }, []);

    //
    function readAllContentClick() {
        message.info("全部已读")
    }

    function lookAllNotifyClick() {
        message.info("查看全部通知")
    }


    return (
        <div>
            {/* <List
                className="notify-loadMore-list"
                itemLayout="horizontal"
                loading={state.initLoading}
                dataSource={state.list}
                renderItem={(item) => (
                    <List.Item
                        actions={[<a key="list-loadMore-edit">edit</a>]}
                    >
                        <Skeleton avatar title={false} loading={item.loading} active>

                            <List.Item.Meta
                                avatar={<Avatar src={item.picture}/>}
                                title={<a href="https://ant.design">{item.name}</a>}
                                description="Ant Design, a design language for background applications, is refined by Ant UED Team"
                            >

                            </List.Item.Meta>


                        </Skeleton>


                    </List.Item>
                )
                }
            >

            </List> */}


            <div className="notify-content-foot">


                {readLoading ? <Button type="link" onClick={readAllContentClick}>
                    全部已读
                </Button> : ''}


                <Button type="link" className='look-all' onClick={lookAllNotifyClick}>
                    查看全部
                </Button>
            </div>


        </div>
    );
}

export default NotifyContentPopover;
